<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Test for jQuery validate() plugin</title>
	<link rel="stylesheet" media="screen" href="css/screen.css">
	<style>
	.warning {
		color: red;
	}
	</style>
	<script src="../lib/jquery.js"></script>
	<script src="../lib/jquery.mockjax.js"></script>
	<script src="../lib/jquery.form.js"></script>
	<script src="../dist/jquery.validate.js"></script>
	<script>
	jQuery(function() {
		$.mockjax({
			url: "login.action",
			response: function(settings) {
				var user = settings.data.match(/user=(.+?)($|&)/)[1],
					password = settings.data.match(/password=(.+?)($|&)/)[1];
				if (password !== "foobar") {
					this.responseText = "Your password is wrong (must be foobar).";
					return;
				}
				this.responseText = "Hi " + user + ", welcome back.";
			},
			responseStatus: 200,
			responseTime: 500
		});

		// show a simple loading indicator
		var loader = jQuery('<div id="loader"><img src="images/loading.gif" alt="loading..."></div>')
			.css({
				position: "relative",
				top: "1em",
				left: "25em",
				display: "inline"
			})
			.appendTo("body")
			.hide();
		jQuery().ajaxStart(function() {
			loader.show();
		}).ajaxStop(function() {
			loader.hide();
		}).ajaxError(function(a, b, e) {
			throw e;
		});

		var v = jQuery("#form").validate({
			submitHandler: function(form) {
				jQuery(form).ajaxSubmit({
					target: "#result"
				});
			}
		});

		jQuery("#reset").click(function() {
			v.resetForm();
		});
	});
	</script>
</head>
<body>
<h1 id="banner"><a href="https://jqueryvalidation.org/">jQuery Validation Plugin</a> Demo</h1>
<div id="main">
	<form method="post" class="cmxform" id="form" action="login.action">
		<fieldset>
			<legend>Login Form (Enter "foobar" as password)</legend>
			<p>
				<label for="user">Username</label>
				<input id="user" name="user" title="Please enter your username (at least 3 characters)" class="required" minlength="3">
			</p>
			<p>
				<label for="pass">Password</label>
				<input type="password" name="password" id="password" class="required" minlength "5">
			</p>
			<p>
				<input class="submit" type="submit" value="Login">
			</p>
		</fieldset>
	</form>
	<div id="result" class="warning">Please login!</div>
	<br>
	<button id="reset">Programmatically reset above form!</button>
	<a href="index.html">Back to main page</a>
</div>
</body>
</html>
